<template>
	<el-card class="box-card">
		<div slot="header" class="clearfix">
			<span>路由管理</span>
		</div>
		<el-table :expand-row-keys="['0']" :data="treeData" style="width: 100%;" row-key="route_id" border
			:tree-props="{ children: 'children' }">
			<el-table-column prop="route_name" label="路由名称" width="200"></el-table-column>
			<el-table-column prop="route_id" label="#"></el-table-column>
			<el-table-column prop="route_title" label="显示标题"></el-table-column>
			<el-table-column prop="route_path" label="路由地址" width="150"></el-table-column>
			<el-table-column prop="route_full_path" label="完整路由地址" width="200"></el-table-column>
			<el-table-column prop="component_name" label="组件名称"></el-table-column>
			<el-table-column prop="component_path" label="组件路由" width="200"></el-table-column>
			<el-table-column prop="route_alias" label="路由别名"></el-table-column>
			<el-table-column prop="permission_remark" label="备注" width="150"></el-table-column>
			<el-table-column prop="require_auth" label="登录状态认证"></el-table-column>
			<el-table-column fixed="right" label="操作" width="280">
				<template slot-scope="scope">
					<el-button v-permission="'system:route:edit'" icon="el-icon-edit" size="small" type="primary" plain
						@click="openEdit(scope.row)">编辑</el-button>
					<el-button v-permission="'system:route:create'" icon="el-icon-circle-plus-outline" type="success" plain
						size="small" @click="openInsert(scope.row)">添加</el-button>
					<el-button v-permission="'system:route:remove'" icon="el-icon-delete" type="danger" plain size="small"
						@click="handleRemove(scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!-- 编辑 -->
		<el-dialog title="编辑路由" :visible.sync="edit_dialog_visible" @close="handleCloseDialog('edit_form')">
			<el-form :model="edit_form" ref="edit_form" status-icon label-width="150px" :rules="rules">
				<el-form-item label="路由显示标题:" prop="route_title">
					<el-input type="text" v-model="edit_form.route_title" autocomplete="off"
						placeholder="路由成为链接时显示的标题文字"></el-input>
				</el-form-item>
				<el-form-item label="路由名称:" prop="route_name">
					<el-input type="text" v-model="edit_form.route_name" autocomplete="off"
						placeholder="以大驼峰命名格式填写英文单词"></el-input>
				</el-form-item>
				<el-form-item label="路由地址:" prop="route_path">
					<el-input type="text" v-model="edit_form.route_path" autocomplete="off"
						placeholder="一级路由：以'/route_path'格式填写，子级路由：以'route_path'格式填写"></el-input>
				</el-form-item>
				<el-form-item label="父级路由权限ID:" prop="parent_id">
					<el-input type="text" v-model="edit_form.parent_id" autocomplete="off" readonly></el-input>
				</el-form-item>
				<el-form-item label="路由完整地址:" prop="route_full_path">
					<el-input type="text" v-model="edit_form.route_full_path" autocomplete="off"
						placeholder="父级路由地址 + 自身地址叠加形成"></el-input>
				</el-form-item>
				<el-form-item label="对应组件名称:" prop="component_name">
					<el-input type="text" v-model="edit_form.component_name" autocomplete="off"
						placeholder="组件名称，以大驼峰命名格式填写英文单词"></el-input>
				</el-form-item>
				<el-form-item label="组件相对路径:" prop="component_path ">
					<el-input type="text" v-model="edit_form.component_path" autocomplete="off"
						placeholder="vue文件的相对路径"></el-input>
				</el-form-item>
				<el-form-item label="路由别名:" prop="route_alias">
					<el-input type="text" v-model="edit_form.route_alias" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="是否认证登录状态" prop="require_auth">
					<el-radio-group v-model="edit_form.require_auth">
						<el-radio :label="1">需要认证</el-radio>
						<el-radio :label="0">对外公开</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="备注信息:" prop="permission_remark">
					<el-input type="text" v-model="edit_form.permission_remark" autocomplete="off"
						placeholder="备注信息，同时作为权限备注"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="edit_dialog_visible = false">取 消</el-button>
				<el-button type="primary" @click="handleEdit">保 存</el-button>
			</span>
		</el-dialog>

		<!--添加 -->
		<el-dialog title="添加路由" :visible.sync="insert_dialog_visible" @close="handleCloseDialog('insert_form')">
			<el-form :model="insert_form" ref="insert_form" status-icon label-width="150px" :rules="rules">
				<el-form-item label="路由显示标题:" prop="route_title">
					<el-input type="text" v-model="insert_form.route_title" autocomplete="off"
						placeholder="路由成为链接时显示的标题文字"></el-input>
				</el-form-item>
				<el-form-item label="路由名称:" prop="route_name">
					<el-input type="text" v-model="insert_form.route_name" autocomplete="off"
						placeholder="以大驼峰命名格式填写英文单词"></el-input>
				</el-form-item>
				<el-form-item label="路由地址:" prop="route_path">
					<el-input type="text" v-model="insert_form.route_path" autocomplete="off"
						placeholder="一级路由：以'/route_path'格式填写，子级路由：以'route_path'格式填写"></el-input>
				</el-form-item>
				<el-form-item label="父级路由权限ID:" prop="parent_id">
					<el-input type="text" v-model="insert_form.parent_id" autocomplete="off" readonly></el-input>
				</el-form-item>
				<el-form-item label="路由完整地址:" prop="route_full_path">
					<el-input type="text" v-model="insert_form.route_full_path" autocomplete="off"
						placeholder="父级路由地址 + 自身地址叠加形成"></el-input>
				</el-form-item>
				<el-form-item label="对应组件名称:" prop="component_name">
					<el-input type="text" v-model="insert_form.component_name" autocomplete="off"
						placeholder="组件名称，以大驼峰命名格式填写英文单词"></el-input>
				</el-form-item>
				<el-form-item label="组件相对路径:" prop="component_path ">
					<el-input type="text" v-model="insert_form.component_path" autocomplete="off"
						placeholder="vue文件的相对路径"></el-input>
				</el-form-item>
				<el-form-item label="路由别名:" prop="route_alias">
					<el-input type="text" v-model="insert_form.route_alias" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="是否认证登录状态" prop="require_auth">
					<el-radio-group v-model="insert_form.require_auth">
						<el-radio :label="1">需要认证</el-radio>
						<el-radio :label="0">对外公开</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="备注信息:" prop="permission_remark">
					<el-input type="text" v-model="insert_form.permission_remark" autocomplete="off"
						placeholder="备注信息，同时作为权限备注"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="insert_dialog_visible = false">取 消</el-button>
				<el-button type="primary" @click="handleInsert">添加</el-button>
			</span>
		</el-dialog>
	</el-card>
</template>

<script>
import { mapActions, mapGetters, mapState } from 'vuex';
export default {
	name: "List",
	data() {
		return {
			edit_form: {
				route_title: '',
				route_name: '',
				route_path: '',
				parent_id: '',
				route_full_path: '',
				component_name: '',
				component_path: '',
				route_alias: '',
				require_auth: '1',
				permission_remark: '',
			},
			edit_dialog_visible: false,
			current_row: '',
			rules: {
				route_name: [
					{ required: true, message: "请输入路由名称，以大驼峰命名格式填写英文单词", trigger: 'blur' },
					{
						pattern: /^[A-Z][a-z]+(?:[A-Z][a-z]+)*$/,
						message: '请填写合规的路由名称！',
						trigger: 'blur'
					}
				],
				route_path: [{ required: true, message: "请输入路由自身地址，一级路由：以'/route_path'格式填写，子级路由：以'route_path'格式填写", trigger: 'blur' },],
				route_full_path: [{ required: true, message: "请输入路由完整地址，父级路由地址 + 自身地址", trigger: 'blur' },],
				component_name: [{ required: true, message: "请输入路由对应组件名称", trigger: 'blur' },],
				component_path: [{ required: true, message: "请输入路由vue文件的相对路径", trigger: 'blur' },],
				permission_remark: [{ required: true, message: "请输入备注信息", trigger: 'blur' },],
			},
			// 添加
			insert_dialog_visible: false,
			insert_form: {
				route_title: '',
				route_name: '',
				route_path: '',
				parent_id: '',
				route_full_path: '',
				component_name: '',
				component_path: '',
				route_alias: '',
				require_auth: 1,
				permission_remark: '',
			},
			current_insert_route: '',
			current_edit_route: '',
		}
	},
	computed: {
		...mapGetters('route', ['treeData']),
	},
	watch: {
		// 切割字符串、去除空值
		"edit_form.route_path": function (newPath) {
			let routeArr = this.edit_form.route_full_path.split('/');
			if (routeArr.length === 2) {
				this.edit_form.route_full_path = `${newPath}`;
			} else {
				// console.log(routeArr);
				routeArr[routeArr.length - 1] = newPath;
				this.edit_form.route_full_path = routeArr.join('/');
			}
		},
		"insert_form.route_path": function (newPath) {
			this.insert_form.route_full_path = this.current_insert_route + '/' + newPath;
		}
	},
	methods: {
		// 打开编辑
		openEdit(route) {
			this.current_edit_route = route.route_full_path;
			this.edit_form = { ...route };
			this.edit_dialog_visible = true;
		},
		// 编辑路由
		...mapActions('route', ['edit_route']),
		handleEdit() {
			this.$refs.edit_form.validate(async (valid) => {
				if (valid) {
					let { status, msg } = await this.edit_route({ ...this.edit_form });
					if (status) {
						this.$message.success(msg);
						this.edit_dialog_visible = false;
					} else {
						this.$message.error(msg);
					}
				}
			});
		},
		// 关闭弹窗，清除表单验证状态
		handleCloseDialog(formName) {
			// formName是变量，不能使用 ref.formName
			this.$refs[formName].resetFields();
		},
		// 打开添加弹窗
		openInsert(route) {
			this.current_insert_route = route.route_full_path;
			this.insert_form.parent_id = route.route_id;
			this.insert_dialog_visible = true;
		},
		// 添加路由
		...mapActions('route', ['add_route']),
		handleInsert() {
			this.$refs.insert_form.validate(async (valid) => {
				if (valid) {
					let { status, msg } = await this.add_route({ ...this.insert_form });
					if (status) {
						this.$message.success(msg);
						this.insert_dialog_visible = false;
					} else {
						this.$message.error(msg);
					}
				}
			});
		},
		// 删除路由
		...mapActions('route', ['remove_route']),
		handleRemove(route) {
			let { route_id, permission_id } = route;
			this.$confirm('该操作将永久删除该路由, 是否继续?', '提示', { type: 'warning' })
				.then(async () => {
					let { status, msg } = await this.remove_route({ route_id, permission_id });
					if (status) {
						// 信息提示
						this.$message.success(msg);
					} else {
						this.$message.error(msg);
					}
				}).catch(() => {
					this.$message.info("已取消该操作！");
				});
		},
	},

}
</script>

<style></style>
